<template>
	<view class="content">
		<view class="page-top">
			<view class="title-box">
				<view class="title">关于本校评选优秀教师优秀教师的选优秀教师优秀教师的</view>
				<text class="state state1">待进行</text>
			</view>
			<view class="info-box u-flex">
				<view class="time">
					02月06日 周二 10:30-12:00
				</view>
				<view class="user u-flex ">
					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="28rpx"
						height="28rpx">
					</u--image>
					<text>付玉</text>
				</view>
			</view>
		</view>
		<view class="box-part">
			<view class="box-title">
				基本信息
			</view>
			<view class="box-row u-flex u-m-t-15">
				<text>会议类型</text>
				<text>党支部会议</text>
			</view>
			<view class="box-row u-flex">
				<text>会议室</text>
				<text>第一会议室</text>
			</view>
			<view class="box-row u-flex">
				<text>物品领取</text>
				<text>没有</text>
			</view>
		</view>
		<view class="box">
			<!-- 待进行 -->
			<view class="people-box u-flex border-bottom">
				<view class="box-title">
					参会人 12
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<!-- 进行中 -->
			<view class="people-box  border-bottom">
				<view class="u-flex box-between">
					<view class="box-title">
						参会人 12
					</view>
					<view class="sign-box u-flex">
						<text>签到</text>
						<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
					</view>
				</view>
				<view class="prople-num">
					请假 2 I 未反馈10
				</view>
				<view class="imgs-box end u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<!-- 已结束 -->
			<view class="people-box  border-bottom">
				<view class="u-flex box-between">
					<view class="box-title">
						参会人 12
					</view>
					<view class="sign-box u-flex">
						<text>签到</text>
						<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
					</view>
				</view>
				<view class="prople-num">
					签到 2 I 请假 2 I 缺勤 10
				</view>
				<view class="imgs-box end u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>

			<view class="people-box u-flex border-bottom">
				<view class="box-title">
					签到情况 2
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex ">
				<view class="box-title">
					议题参与人 2
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="box-part">
			<view class="box-title">
				会议主题
			</view>
			<view class="box-content">
				本次会议主要为了能够评选比上学期的优秀教师
			</view>
			<view class="box-title">
				会议内容
			</view>
			<view class="box-content">
				本次会议主要为了能够评选比上学期的优秀教师，请大家积极参与！主要为了能够评选比上学期的
			</view>
			<view class="box-title">
				附件
			</view>
			<view class="file-box u-flex">
				<u-icon name="attach" color="#4871C0" size="24"></u-icon>
				<text>小米的论文数据表修改版</text>
			</view>
		</view>

		<!-- 底部按钮 -->

		<!-- 进行中状态下 -->
		<!-- <view class="button u-flex"> -->
		<!-- <view class="button-item" @click="gotopicDetails()">
				查看议题
			</view>
			<view class="button-item">
				签到
			</view>
			<view class="button-item" @click="show = true">
				领取物品签到
			</view> -->
		<!-- 已结束状态 -->
		<!-- <view class="button-item" >
				下载会议纲要
			</view> -->
		<!-- </view> -->
		<!-- 待进行状态下 -->
		<!-- <view class="button" @click="show = true">
			请假
		</view> -->
		<!-- 我发布待进行 -->
		<view class="button u-flex push-button">
			<view class="button-item border-right">
				取消会议
			</view>
			<view class="button-item border-right">
				查看议题
			</view>
			<view class="button-item border-right">
				克隆会议
			</view>
			<view class="button-item">
				修改会议
			</view>
		</view>
		<!-- 我发布的进行中 -->
		<!-- <view class="button u-flex">
			<view class="button-item" @click="gotopicDetails()">
				克隆会议
			</view>
			<view class="button-item">
				查看议题
			</view>
		</view> -->
		<!-- 我发布的已结束 -->
		<!-- <view class="button u-flex push-button">
			<view class="button-item border-right">
				克隆会议
			</view>
			<view class="button-item border-right">
				查看议题
			</view>
			<view class="button-item" @click="gotomeetingMinutes()">
				上传会议纪要
			</view>
			<view class="button-item" @click="gotomeetingMinutes()">
				会议纪要
			</view>
		</view> -->
		
		<!-- 领取物品签到弹窗 -->
			<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" title="领取物品签到" content="请确认已领取到会议物品！"
				confirmText="签到" :showCancelButton="true"></u-modal>
			<!-- 删除弹窗 -->
			<u-modal :show="show1" @confirm="confirm1" @cancel="cancel1" ref="uModal1" content="删除确认？" confirmText="确定"
				:showCancelButton="true"></u-modal>
			<!-- 签到弹窗 -->
			<u-overlay :show="show2" @click="show2= false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<img class="bg-img" src="@/static/img/pupop_icon.png" />
						<u-icon class="clsoe" name="close" color="#D9D9D9" size="22" @click="show2= false"></u-icon>
						<!-- 准时签到 -->
						<!-- <view class="warp-content">
						<text>感谢您</text>
						<text>准时参与本次会议！</text>
						<text class="warp-button">签到</text>
					</view> -->
						<!-- 迟到签到 -->
						<!-- <view class="warp-content">
						<text>很抱歉</text>
						<text>准时参与本次会议！</text>
						<text class="warp-button warp-button2">迟到签到</text>
					</view> -->
						<!-- 缺勤会议 -->
						<view class="warp-content">
							<text>很遗憾</text>
							<text>你缺勤了本次会议！</text>
							<text class="warp-button" @click="show2= false">我知道了</text>
						</view>
					</view>
				</view>
			</u-overlay>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false
			};
		},
		methods: {
			cancel() {
				this.show = false;
			},
			// 取消审核
			confirm() {

			},
			cancel1() {
				this.show1 = false;
			},
			// 删除
			confirm1() {

			},
			// 查看议题
			gotopicDetails() {
				uni.navigateTo({
					url: '/pages/tabbar-3-detial/topicDetails/topicDetails'
				});
			},
			// 会议纪要
			gotomeetingMinutes() {
				uni.navigateTo({
					url: '/pages/tabbar-3-detial/meetingMinutes/meetingMinutes'
				});
			},
		}

	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 130rpx;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.box-between {
		justify-content: space-between;
	}

	.border-right {
		border-right: 2px solid #F3F3F3;
	}

	.page-top {
		padding: 30rpx;
		background-color: #fff;
	}

	.title-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.state {
		font-size: 24rpx;
		font-weight: 500;
		padding: 10rpx 12rpx;
	}

	.state1 {
		color: #8B48C0;
		background: #F8EEFF;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state2 {
		color: #4871C0;
		background: #EBF1FD;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state3 {
		color: #999999;
		background: #F5F2F5;
		border-radius: 8rpx;
		opacity: 1;
	}

	.info-box {
		margin-top: 24rpx;
	}

	.time {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-right: 30rpx;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}

	.box-part {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	.border-bottom {
		border-bottom: 2px solid #F8F8F8;
	}

	.user-img {
		margin-right: 20rpx;
	}

	.box-content {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
		border-bottom: 2px solid #F8F8F8;
		margin-bottom: 20rpx;
	}

	.file-box {
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 30rpx 0 40rpx 0;
		background-color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.reason {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
	}

	.button-item {
		width: 50%;
		text-align: center;
	}

	.button-item:first-child {
		color: #999999;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	.rect {
		width: 638rpx;
		height: 588rpx;
		margin: 50% auto;
		text-align: center;
		position: relative;
	}

	.bg-img {
		width: 638rpx;
		height: 588rpx;
	}

	.warp-content {
		width: 100%;
		position: absolute;
		top: 48%;
		right: 0;
		display: flex;
		flex-direction: column;
		font-size: 36rpx;
		font-weight: bold;
		color: #666666;
		line-height: 60rpx;
	}

	.warp-button {
		width: 356rpx;
		height: 87rpx;
		line-height: 87rpx;
		text-align: center;
		background: #4871C0;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 40rpx auto;
	}

	.clsoe {
		position: absolute;
		right: 30rpx;
		top: 22%;
	}

	.warp-button2 {
		background: #FF7A00;
	}

	.sign-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.prople-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
		text-align: right;
		margin: 30rpx 0;
	}

	.end {
		justify-content: end;
	}

	.push-button {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
